<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <script>
        window.log = console.log;
        var spots = {}, touches, timer;
        document.addEventListener('touchstart', function (e) {
            e.preventDefault();
            console.log("touchstart");
            log("e.targetTouches");
            log(e.targetTouches);
            log("eeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
            log(e);

            [].forEach.call(e.targetTouches, function (touch) {
                //对每一根触摸在屏幕上的手指都生成一个元素，并且用touch.identifier作为该元素的唯一标识，触摸结束后清除引用的元素
           
                console.log("spots[touch.identifier]");
                console.log(spots[touch.identifier]);
                var div = document.createElement("div");
                div.innerText = JSON.stringify(e.targetTouches);
                document.body.appendChild(div);
            })

            // timer = setInterval(function () {
            //     renderTouches(touches);
            // }, 16);
        }, false);

        function renderTouches(touches) {
            if (!touches) {
                return;
            };
            [].forEach.call(touches, function (touch) {
                var spot = spots[touch.identifier];
                if (spot) {
                    spot.style.top = touch.pageY - 35;
                    spot.style.backgroundColor = red;
                    spot.style.left = touch.pageX - 35;
                }
            })
        }

       
    </script>
</body>

</html>